<template>
  <div class="about">
    <el-card>
      <el-descriptions title="累计数据">
        <el-descriptions-item label="累计学习时长："><span class="value">{{ totalData.totalTime || 0 }}</span>分钟</el-descriptions-item>
        <el-descriptions-item label="累计完成课程："><span class="value">{{ totalData.finishCourse || 0}}</span>门</el-descriptions-item>
      </el-descriptions>
      <div class="gap"></div>
      <el-tabs type="border-card">
        <el-tab-pane label="日"></el-tab-pane>
        <el-tab-pane label="周"></el-tab-pane>
        <el-tab-pane label="月"></el-tab-pane>

        <el-descriptions title="11月12日">
          <el-descriptions-item label="学习时长："><span class="value">{{ checkedData.totalTime || 0}}</span>分钟</el-descriptions-item>
          <el-descriptions-item label="完成课程："><span class="value">{{ checkedData.finishCourse || 0 }}</span>门</el-descriptions-item>
          <el-descriptions-item label="学习天数："><span class="value">{{ checkedData.studyDay || 0 }}</span>天</el-descriptions-item>
          <el-descriptions-item v-if="checkedData.desc" label="时间范围："><span class="value">{{ checkedData.desc }}</span></el-descriptions-item>
        </el-descriptions>
        <div class="gap"></div>
        <div>
          <v-chart autoresize ref="myChart" class="chart" :option="option" @click="clickHilght"/>
        </div>

      </el-tabs>
    </el-card>
  </div>
</template>
<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart from "vue-echarts";
import * as echarts from 'echarts'
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);
import {ref} from "vue";
const checkedData = ref({
})
const totalData = ref({
  totalTime:"338",
  finishCourse: 3
})
const responseData = ref({
  "totalTime": "338",
  "finishCourse": 3,
  "studyDay": 7,
  "segmentedDataList": [
    {
      "name": "11-13",
      "time": "10",
      "finishCourse": 0,
      "desc": "11月13日-11月19日",
      "studyDay": 0
    },
    {
      "name": "11-20",
      "time": "20",
      "finishCourse": 0,
      "desc": "11月20日-11月26日",
      "studyDay": 0
    },
    {
      "name": "11-27",
      "time": "166",
      "finishCourse": 0,
      "desc": "11月27日-12月03日",
      "studyDay": 1
    },
    {
      "name": "12-04",
      "time": "30",
      "finishCourse": 0,
      "desc": "12月04日-12月10日",
      "studyDay": 0
    },
    {
      "name": "12-11",
      "time": "171",
      "finishCourse": 3,
      "desc": "12月11日-12月17日",
      "studyDay": 6
    },
    {
      "name": "12-18",
      "time": "0",
      "finishCourse": 0,
      "desc": "12月18日-12月24日(本周)",
      "studyDay": 0
    }
  ]
})

checkedData.value = {
  ...responseData.value
}
const currentIndex = ref(-1)

const option = ref({
  backgroundColor: '#00265f',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  grid: {
    top: '15%',
    right: '3%',
    left: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: responseData.value.segmentedDataList.map(el => el.name),
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    },
    axisLabel: {
      margin: 10,
      color: '#e2e9ff',
      textStyle: {
        fontSize: 14
      },
    },
  }],
  yAxis: [{
    name:"学习时长:分钟",
    nameTextStyle:{
      color:"#e2e9ff"
    },
    axisLabel: {
      formatter: '{value}',
      color: '#e2e9ff',
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    }
  }],
  series: [{
    type: 'bar',
    data: responseData.value.segmentedDataList.map(el => el.time),
    barWidth: '20px',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0,244,255,1)' // 0% 处的颜色
        }, {
          offset: 1,
          color: 'rgba(0,77,167,1)' // 100% 处的颜色
        }], false),
        barBorderRadius: [30, 30, 30, 30],
        shadowColor: 'rgba(0,160,221,1)',
        shadowBlur: 4,
      }
    },
    label: {
      show: true,
      position: 'top'
    }
  }]
})
const myChart = ref({})
const clickHilght = function (e) {
  console.log(e,myChart.value.dispatchAction)
  // // 取消之前高亮的图形
  // myChart.value.dispatchAction({
  //   type: 'downplay',
  //   seriesIndex: 0,
  //   dataIndex: currentIndex.value
  // });
  currentIndex.value = e.dataIndex

  // 高亮当前图形
  myChart.value.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: -2
  });
  checkedData.value = {
    ...responseData.value.segmentedDataList[currentIndex.value]
  }
  console.log(checkedData.value)
}
</script>
<style>
.gap {
  height: 20px;
}
.chart {
  height: 400px;
}
.value {
  font-size: 18px;
  font-weight: bold;
  padding-right: 5px
}
</style>
